<template>
  <div class="avatar-debug">
    <h3>头像调试信息</h3>
    
    
    <div class="debug-section">
      <h4>测试头像显示</h4>
      <div class="test-avatars">
        <div class="test-avatar">
          <p>当前头像:</p>
          <el-avatar :size="80" :src="avatarUrl">
            {{ user?.nickname?.charAt(0) || 'U' }}
          </el-avatar>
        </div>
        
        <div class="test-avatar" v-if="user?.avatar">
          <p>直接URL:</p>
          <el-avatar :size="80" :src="userAPI.getAvatarUrl(user.avatar || '')">
            {{ user?.nickname?.charAt(0) || 'U' }}
          </el-avatar>
        </div>
      </div>
    </div>
    
    <div class="debug-section">
      <h4>测试上传</h4>
      <input 
        type="file" 
        accept="image/*" 
        @change="testUpload"
        ref="testFileInput"
      />
      <el-button @click="testFileInput?.click()">选择测试图片</el-button>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useAuthStore } from '../store/authStore.js'
import { userAPI } from '../services/api.js'

export default {
  name: 'AvatarDebug',
  setup() {
    const authStore = useAuthStore()
    const user = computed(() => authStore.user.value)
    const testFileInput = ref()
    
    const avatarUrl = computed(() => {
      const avatar = user.value?.avatar
      if (avatar) {
        if (avatar.startsWith('http')) {
          return avatar
        }
        return userAPI.getAvatarUrl(avatar)
      }
      return null
    })
    
    const testUpload = async (event) => {
      const file = event.target.files[0]
      if (!file) return
      
      console.log('测试上传文件:', file)
      
      try {
        const response = await userAPI.uploadAvatar(user.value.id, file)
        console.log('测试上传响应:', response)
        
        // 更新用户信息
        const updatedUser = {
          ...user.value,
          avatar: response.filename || file.name
        }
        authStore.updateUserInfo(updatedUser)
        
        console.log('更新后的用户信息:', updatedUser)
      } catch (error) {
        console.error('测试上传失败:', error)
      }
    }
    
    return {
      user,
      avatarUrl,
      testFileInput,
      testUpload,
      userAPI
    }
  }
}
</script>

<style scoped>
.avatar-debug {
  padding: 20px;
  max-width: 800px;
}

.debug-section {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.debug-section h4 {
  margin-top: 0;
  color: #333;
}

.test-avatars {
  display: flex;
  gap: 20px;
  align-items: center;
}

.test-avatar {
  text-align: center;
}

</style>
